<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件</title>
</head>
<body>
    <!-- 事件源 -->
     <button onclick="alert('hello world')">点击</button>
     <!-- 事件监听： 绑定事件、触发事件
        1，html属性中提供了on+事件类型:耦合性高，代码复用率低
        2，DOM0绑定事件:对象.属性（on+事件类型）= 事件处理函数
        3，DOM2绑定事件：对象.方法（）；
     -->
     <button class="ck">点击2</button>
     <script>
        //获取节点
        const ck1 = document.querySelector('.ck');
        //对象.属性 = 事件处理程序（函数）
        ck1.onclick = function(){
            alert('hello button');
        }
        ck1.onclick = null;//移除事件
     </script>
     <button id="btn">点击3</button>
     <script>
        const ck = document.querySelector('#btn');
        //添加事件监听（函数）addEventListener（'事件类型'，'事件处理函数'，[true/false]）；
        //事件类型不需要添加前缀on
        ck.addEventListener('click',test);
        ck.removeEventListener('click',test)
        let test = function(){
            alert('hello btn3');
        }
     </script>
</body>
</html>